<template>
  <div class="search-page">
    <!-- 搜索框区域 -->
    <div class="search-header" :class="{ 'search-focused': isFocused }">
      <div class="search-input-wrapper">
        <i class="iconfont icon-search search-icon"></i>
        <input 
          type="text" 
          class="search-input"
          v-model="searchQuery"
          @focus="handleFocus"
          @blur="handleBlur"
          @input="handleInput"
          placeholder="搜索音乐、歌手、歌词、用户"
        >
        <i 
          class="iconfont icon-close clear-icon" 
          v-show="searchQuery"
          @click="clearSearch"
        ></i>
      </div>
      <div class="search-btn" @click="performSearch">搜索</div>
    </div>

    <!-- 添加热门搜索词流动展示 -->
    <div class="trending-searches" v-if="!isFocused && !isSearching">
      <div class="trending-header">
        <i class="iconfont icon-fire"></i>
        <span>热门搜索</span>
      </div>
      <div class="trending-tags-container">
        <div class="trending-tags" :style="{ transform: `translateX(${-currentTranslate}px)` }">
          <div 
            v-for="(tag, index) in [...trendingTags, ...trendingTags]" 
            :key="index"
            class="trending-tag"
            :class="{ 'pulse': pulsingIndex === index }"
            @click="useHotSearch(tag.text)"
          >
            <span class="tag-rank" :style="{ background: tag.color }">{{ tag.rank }}</span>
            <span class="tag-text">{{ tag.text }}</span>
            <span class="tag-heat">{{ tag.heat }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加音乐场景推荐 -->
    <div class="music-scenes" v-if="!isFocused && !isSearching">
      <h2 class="scene-title">
        <i class="iconfont icon-music"></i>
        音乐场景
      </h2>
      <div class="scene-grid">
        <div 
          v-for="(scene, index) in musicScenes" 
          :key="scene.id"
          class="scene-card"
          :style="{ 
            animationDelay: `${index * 0.1}s`,
            backgroundImage: scene.isPlaying ? 'none' : `linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5)), url(${scene.image})`
          }"
          @click="toggleSceneVideo(scene)"
        >
          <!-- 视频播放器 -->
          <video
            v-if="scene.video"
            :ref="`video-${scene.id}`"
            class="scene-video"
            :src="scene.video"
            :class="{ 'playing': scene.isPlaying }"
            loop
            muted
          ></video>

          <div class="scene-content" v-show="!scene.isPlaying">
            <i :class="scene.icon"></i>
            <h3>{{ scene.name }}</h3>
            <p>{{ scene.description }}</p>
          </div>

          <!-- 播放控制按钮 -->
          <div class="scene-controls" v-show="scene.isPlaying">
            <div class="control-btn mute-btn" @click.stop="toggleMute(scene)">
              <i class="iconfont" :class="scene.isMuted ? 'icon-mute' : 'icon-volume'"></i>
            </div>
            <div class="control-btn close-btn" @click.stop="stopVideo(scene)">
              <i class="iconfont icon-close"></i>
            </div>
          </div>

          <div class="scene-hover" v-show="!scene.isPlaying">
            <span class="play-now">
              <i class="iconfont icon-play1"></i>
              立即播放
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加智能推荐 -->
    <div class="ai-recommendations" v-if="!isFocused && !isSearching">
      <div class="ai-header">
        <div class="ai-title">
          <i class="iconfont icon-robot"></i>
          <span>智能推荐</span>
        </div>
        <div class="ai-refresh" @click="refreshRecommendations">
          <i class="iconfont icon-refresh"></i>
          换一批
        </div>
      </div>
      <div class="recommendation-cards">
        <div 
          v-for="(rec, index) in aiRecommendations" 
          :key="index"
          class="recommendation-card"
          :class="{ 'card-hover': hoveredCard === index }"
          @mouseenter="hoveredCard = index"
          @mouseleave="hoveredCard = -1"
        >
          <div class="rec-icon">
            <i :class="rec.icon"></i>
          </div>
          <div class="rec-content">
            <h4>{{ rec.title }}</h4>
            <p>{{ rec.description }}</p>
          </div>
          <div class="rec-action">
            <button class="action-btn">
              <i class="iconfont icon-play1"></i>
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索建议和历史 -->
    <div class="search-suggestions" v-if="isFocused && !isSearching">
      <!-- 搜索历史 -->
      <div class="search-history" v-if="searchHistory.length && !searchQuery">
        <div class="history-header">
          <h3>搜索历史</h3>
          <i class="iconfont icon-delete" @click="clearHistory"></i>
        </div>
        <div class="history-list">
          <div 
            v-for="(item, index) in searchHistory" 
            :key="index"
            class="history-item"
            :style="{ animationDelay: index * 0.05 + 's' }"
            @click="useHistoryItem(item)"
          >
            <i class="iconfont icon-time"></i>
            <span>{{ item }}</span>
          </div>
        </div>
      </div>

      <!-- 热门搜索 -->
      <div class="hot-searches" v-if="!searchQuery">
        <h3>热门搜索</h3>
        <div class="hot-tags">
          <div 
            v-for="(tag, index) in hotSearches" 
            :key="index"
            class="hot-tag"
            :class="{ 'top-3': index < 3 }"
            :style="{ animationDelay: index * 0.05 + 's' }"
            @click="useHotSearch(tag)"
          >
            <span class="rank">{{ index + 1 }}</span>
            <span class="tag-text">{{ tag }}</span>
            <span class="hot-icon" v-if="index < 3">🔥</span>
          </div>
        </div>
      </div>

      <!-- 搜索建议 -->
      <div class="search-suggestions-list" v-if="searchQuery && suggestions.length">
        <div 
          v-for="(suggestion, index) in suggestions" 
          :key="index"
          class="suggestion-item"
          :style="{ animationDelay: index * 0.05 + 's' }"
          @click="useSuggestion(suggestion)"
        >
          <i class="iconfont icon-search"></i>
          <span v-html="highlightQuery(suggestion)"></span>
        </div>
      </div>
    </div>

    <!-- 搜索结果 -->
    <div class="search-results" v-if="isSearching">
      <!-- 搜索结果标签页 -->
      <div class="results-tabs">
        <div 
          v-for="tab in tabs" 
          :key="tab.id"
          class="tab-item"
          :class="{ active: currentTab === tab.id }"
          @click="currentTab = tab.id"
        >
          {{ tab.name }}
          <span class="tab-count" v-if="tab.count">{{ tab.count }}</span>
          <div class="tab-indicator"></div>
        </div>
      </div>

      <!-- 搜索结果内容 -->
      <div class="results-grid">
        <div 
          v-for="(result, index) in searchResults" 
          :key="result.id"
          class="result-card"
          :style="{ animationDelay: `${index * 0.1}s` }"
          @mouseenter="handleMouseEnter($event, result.id)"
          @mouseleave="handleMouseLeave($event, result.id)"
        >
          <!-- 卡片正面 -->
          <div class="card-front">
            <div class="result-cover">
              <img :src="result.cover" :alt="result.name">
              <div class="play-overlay">
                <div class="play-btn">
                  <i class="iconfont icon-play1"></i>
                </div>
              </div>
            </div>
            <div class="result-info">
              <h3 class="result-name">{{ result.name }}</h3>
              <p class="result-artist">{{ result.artist }}</p>
              <div class="result-tags">
                <span v-for="tag in result.tags" 
                      :key="tag" 
                      class="tag">{{ tag }}</span>
              </div>
            </div>
          </div>

          <!-- 卡片背面 -->
          <div class="card-back">
            <div class="back-content">
              <div class="music-info">
                <div class="info-item">
                  <span class="label">专辑</span>
                  <span class="value">{{ result.album }}</span>
                </div>
                <div class="info-item">
                  <span class="label">时长</span>
                  <span class="value">{{ result.duration }}</span>
                </div>
                <div class="info-item">
                  <span class="label">播放次数</span>
                  <span class="value">{{ formatCount(result.playCount) }}</span>
                </div>
              </div>
              <div class="action-buttons">
                <button class="action-btn play">
                  <i class="iconfont icon-play1"></i>
                  立即播放
                </button>
                <button class="action-btn add">
                  <i class="iconfont icon-add"></i>
                  添加到歌单
                </button>
                <button class="action-btn download">
                  <i class="iconfont icon-download"></i>
                  下载
                </button>
              </div>
              <div class="lyrics-preview">
                <p>{{ result.lyrics || '暂无歌词' }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Search',
  data() {
    return {
      searchQuery: '',
      isFocused: false,
      isSearching: false,
      currentTab: 'songs',
      searchHistory: ['周杰伦', '陈奕迅', '林俊杰'],
      hotSearches: [
        '起风了', '晴天', '孤勇者', '光年之外', 
        '红玫瑰', '海阔天空', '不能说的秘密', 
        '稻香', '青花瓷', '倒数'
      ],
      suggestions: [],
      tabs: [
        { id: 'songs', name: '单曲', count: 0 },
        { id: 'artists', name: '歌手', count: 0 },
        { id: 'albums', name: '专辑', count: 0 },
        { id: 'playlists', name: '歌单', count: 0 }
      ],
      searchResults: [],
      currentTranslate: 0,
      pulsingIndex: -1,
      trendingTags: [
        { rank: '1', text: '周杰伦新歌', heat: '1.2w', color: '#ff6b6b' },
        { rank: '2', text: '华语金曲榜', heat: '8.5k', color: '#ff9f43' },
        { rank: '3', text: '热门歌单', heat: '6.7k', color: '#ffd32a' },
        { rank: '4', text: '抖音神曲', heat: '5.2k', color: '#0abde3' },
        { rank: '5', text: '经典老歌', heat: '4.8k', color: '#48dbfb' },
        { rank: '6', text: '流行音乐', heat: '4.3k', color: '#2e86de' },
        { rank: '7', text: '网络热歌', heat: '3.9k', color: '#54a0ff' },
        { rank: '8', text: '摇滚精选', heat: '3.5k', color: '#5f27cd' }
      ],
      hoveredCard: -1,
      musicScenes: [
        {
          id: 1,
          name: '运动健身',
          description: '活力四射的运动音乐',
          icon: 'iconfont icon-run',
          image: 'https://picsum.photos/400/200?random=1',
          video: 'https://www.w3schools.com/html/mov_bbb.mp4',
          isPlaying: false,
          isMuted: true
        },
        {
          id: 2,
          name: '工作学习',
          description: '提升专注力的音乐',
          icon: 'iconfont icon-work',
          image: 'https://picsum.photos/400/200?random=2',
          video: 'https://www.w3schools.com/html/mov_bbb.mp4',
          isPlaying: false,
          isMuted: true
        },
        {
          id: 3,
          name: '睡前放松',
          description: '舒缓助眠的轻音乐',
          icon: 'iconfont icon-sleep',
          image: 'https://picsum.photos/400/200?random=3',
          video: 'https://www.w3schools.com/html/mov_bbb.mp4',
          isPlaying: false,
          isMuted: true
        },
        {
          id: 4,
          name: '派对狂欢',
          description: '点燃气氛的动感音乐',
          icon: 'iconfont icon-party',
          image: 'https://picsum.photos/400/200?random=4',
          video: 'https://www.w3schools.com/html/mov_bbb.mp4',
          isPlaying: false,
          isMuted: true
        }
      ],
      aiRecommendations: [
        {
          icon: 'iconfont icon-heart',
          title: '根据你的收藏推荐',
          description: '与你喜欢的歌曲风格相似'
        },
        {
          icon: 'iconfont icon-calendar',
          title: '每日私人歌单',
          description: '为你精选的音乐组合'
        },
        {
          icon: 'iconfont icon-fire',
          title: '最近热门推荐',
          description: '根据实时热度推荐'
        }
      ]
    }
  },
  mounted() {
    this.startAnimation();
    this.startPulseAnimation();
  },
  methods: {
    handleFocus() {
      this.isFocused = true;
      this.isSearching = false;
    },
    handleBlur() {
      // 延迟关闭以允许点击建议
      setTimeout(() => {
        this.isFocused = false;
      }, 200);
    },
    handleInput() {
      // 模拟搜索建议
      if (this.searchQuery) {
        this.suggestions = [
          this.searchQuery + ' - 热门单曲',
          this.searchQuery + ' - 最新专辑',
          this.searchQuery + ' - 精选歌单',
        ];
      } else {
        this.suggestions = [];
      }
    },
    clearSearch() {
      this.searchQuery = '';
      this.suggestions = [];
    },
    performSearch() {
      if (!this.searchQuery) return;
      
      this.isSearching = true;
      this.isFocused = false;
      
      // 添加到搜索历史
      if (!this.searchHistory.includes(this.searchQuery)) {
        this.searchHistory.unshift(this.searchQuery);
      }

      // 模拟搜索结果
      this.searchResults = Array(10).fill(null).map((_, i) => ({
        cover: `https://picsum.photos/50/50?random=${i}`,
        name: `搜索结果 ${i + 1}`,
        artist: '演唱者',
      }));

      // 更新标签数量
      this.tabs[0].count = this.searchResults.length;
    },
    useHistoryItem(item) {
      this.searchQuery = item;
      this.performSearch();
    },
    useHotSearch(tag) {
      this.searchQuery = tag;
      this.performSearch();
    },
    useSuggestion(suggestion) {
      this.searchQuery = suggestion.split(' - ')[0];
      this.performSearch();
    },
    clearHistory() {
      this.searchHistory = [];
    },
    highlightQuery(text) {
      if (!this.searchQuery) return text;
      const reg = new RegExp(this.searchQuery, 'gi');
      return text.replace(reg, match => `<span class="highlight">${match}</span>`);
    },
    startAnimation() {
      const animate = () => {
        this.currentTranslate += 1;
        const totalWidth = this.trendingTags.length * 200; // 假设每个标签宽 200px
        if (this.currentTranslate >= totalWidth) {
          this.currentTranslate = 0;
        }
        requestAnimationFrame(animate);
      };
      requestAnimationFrame(animate);
    },
    startPulseAnimation() {
      let index = 0;
      setInterval(() => {
        this.pulsingIndex = index;
        index = (index + 1) % this.trendingTags.length;
      }, 2000);
    },
    toggleSceneVideo(scene) {
      const video = this.$refs[`video-${scene.id}`][0];
      if (!scene.isPlaying) {
        // 停止其他正在播放的视频
        this.musicScenes.forEach(s => {
          if (s.id !== scene.id && s.isPlaying) {
            this.stopVideo(s);
          }
        });
        
        // 播放当前视频
        scene.isPlaying = true;
        video.play();
      }
    },
    stopVideo(scene) {
      const video = this.$refs[`video-${scene.id}`][0];
      scene.isPlaying = false;
      scene.isMuted = true;
      video.pause();
      video.currentTime = 0;
    },
    toggleMute(scene) {
      const video = this.$refs[`video-${scene.id}`][0];
      scene.isMuted = !scene.isMuted;
      video.muted = scene.isMuted;
    },
    refreshRecommendations() {
      // 刷新推荐
      this.$refs.recommendationCards?.classList.add('refresh-animation')
      setTimeout(() => {
        this.$refs.recommendationCards?.classList.remove('refresh-animation')
      }, 500)
    },
    handleMouseEnter(event, id) {
      const card = event.currentTarget;
      const rect = card.getBoundingClientRect();
      const centerX = rect.left + rect.width / 2;
      const centerY = rect.top + rect.height / 2;
      
      card.addEventListener('mousemove', (e) => {
        const rotateX = (e.clientY - centerY) / 10;
        const rotateY = (centerX - e.clientX) / 10;
        
        card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
      });
    },
    
    handleMouseLeave(event, id) {
      const card = event.currentTarget;
      card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
      card.removeEventListener('mousemove', () => {});
    }
  }
}
</script>

<style scoped>
.search-page {
  padding: 20px;
  min-height: calc(100vh - 100px);
}

/* 搜索框样式 */
.search-header {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-header.search-focused {
  transform: translateY(10px) scale(1.02);
}

.search-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  background: white;
  border-radius: 30px;
  padding: 12px 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.search-focused .search-input-wrapper {
  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.2);
}

.search-icon {
  color: #999;
  font-size: 20px;
  margin-right: 10px;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  color: #333;
}

.clear-icon {
  color: #999;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.3s ease;
}

.clear-icon:hover {
  color: #ff6b6b;
  transform: rotate(90deg);
}

.search-btn {
  background: linear-gradient(45deg, #ff6b6b, #ee5253);
  color: white;
  padding: 12px 30px;
  border-radius: 25px;
  cursor: pointer;
  font-weight: 500;
  box-shadow: 0 4px 15px rgba(238, 82, 83, 0.3);
  transition: all 0.3s ease;
}

.search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(238, 82, 83, 0.4);
}

.search-btn:active {
  transform: translateY(0);
}

/* 搜索建议和历史样式 */
.search-suggestions {
  background: white;
  border-radius: 15px;
  padding: 20px;
  margin-top: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.history-header h3 {
  color: #333;
  font-size: 18px;
}

.history-header i {
  color: #999;
  cursor: pointer;
  transition: all 0.3s ease;
}

.history-header i:hover {
  color: #ff6b6b;
  transform: rotate(90deg);
}

.history-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.history-item {
  display: flex;
  align-items: center;
  padding: 6px 15px;
  background: #f5f5f5;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  animation: fadeIn 0.5s ease-out forwards;
}

.history-item:hover {
  background: #ffe0e0;
  color: #ff6b6b;
  transform: translateY(-2px);
}

.history-item i {
  font-size: 14px;
  margin-right: 5px;
}

/* 热门搜索样式 */
.hot-searches h3 {
  margin-bottom: 15px;
  color: #333;
  font-size: 18px;
}

.hot-tags {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.hot-tag {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background: #f5f5f5;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  animation: fadeIn 0.5s ease-out forwards;
}

.hot-tag:hover {
  background: #ffe0e0;
  transform: translateX(5px);
}

.hot-tag.top-3 {
  background: linear-gradient(45deg, #ff9a9e, #fad0c4);
  color: white;
}

.rank {
  font-weight: bold;
  margin-right: 10px;
  min-width: 20px;
}

.hot-icon {
  margin-left: auto;
  font-size: 16px;
}

/* 搜索建议列表样式 */
.suggestion-item {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 8px;
  animation: fadeIn 0.5s ease-out forwards;
}

.suggestion-item:hover {
  background: #f5f5f5;
  transform: translateX(5px);
}

.suggestion-item i {
  margin-right: 10px;
  color: #999;
}

/* 搜索结果样式 */
.results-tabs {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.tab-item {
  position: relative;
  padding: 10px 20px;
  cursor: pointer;
  color: #666;
  transition: all 0.3s ease;
}

.tab-item.active {
  color: #ff6b6b;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -11px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #ff6b6b;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.tab-count {
  font-size: 12px;
  background: #f5f5f5;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 5px;
}

.results-content {
  animation: fadeIn 0.5s ease-out;
}

.result-item {
  display: flex;
  align-items: center;
  padding: 15px;
  background: white;
  border-radius: 10px;
  margin-bottom: 10px;
  transition: all 0.3s ease;
  animation: slideInRight 0.5s ease-out forwards;
  opacity: 0;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.result-item:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.result-cover {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  margin-right: 15px;
}

.result-info {
  flex: 1;
}

.result-name {
  font-size: 16px;
  margin-bottom: 5px;
}

.result-artist {
  font-size: 14px;
  color: #666;
}

.result-actions {
  display: flex;
  gap: 15px;
}

.result-actions i {
  font-size: 24px;
  color: #ff6b6b;
  cursor: pointer;
  transition: all 0.3s ease;
}

.result-actions i:hover {
  transform: scale(1.2);
}

/* 动画 */
.fade-slide-enter-active, .fade-slide-leave-active {
  transition: all 0.3s ease;
}

.fade-slide-enter, .fade-slide-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 高亮样式 */
:deep(.highlight) {
  color: #ff6b6b;
  font-weight: bold;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-header {
    flex-direction: column;
    gap: 10px;
  }

  .search-btn {
    text-align: center;
  }

  .hot-tags {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .results-tabs {
    overflow-x: auto;
    padding-bottom: 5px;
  }

  .tab-item {
    padding: 8px 15px;
    white-space: nowrap;
  }
}

/* 添加热门搜索词样式 */
.trending-searches {
  margin: 30px 0;
  padding: 20px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.trending-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  color: #ff6b6b;
  font-size: 18px;
  font-weight: bold;
}

.trending-header i {
  margin-right: 8px;
  font-size: 24px;
  animation: flame 1.5s ease-in-out infinite;
}

@keyframes flame {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

.trending-tags-container {
  overflow: hidden;
  position: relative;
}

.trending-tags-container::before,
.trending-tags-container::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50px;
  z-index: 1;
  pointer-events: none;
}

.trending-tags-container::before {
  left: 0;
  background: linear-gradient(to right, white, transparent);
}

.trending-tags-container::after {
  right: 0;
  background: linear-gradient(to left, white, transparent);
}

.trending-tags {
  display: flex;
  gap: 15px;
  transition: transform 0.1s linear;
}

.trending-tag {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background: #f8f9fa;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  min-width: 180px;
}

.trending-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.trending-tag.pulse {
  animation: pulse 2s ease-in-out;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 4px 20px rgba(255, 107, 107, 0.2);
  }
  100% {
    transform: scale(1);
  }
}

.tag-rank {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
  color: white;
  font-weight: bold;
  margin-right: 10px;
  font-size: 14px;
}

.tag-text {
  flex: 1;
  color: #333;
  font-size: 14px;
}

.tag-heat {
  color: #ff6b6b;
  font-size: 12px;
  margin-left: 10px;
  opacity: 0.8;
}

/* 添加响应式样式 */
@media (max-width: 768px) {
  .trending-searches {
    margin: 20px 0;
    padding: 15px;
  }

  .trending-tag {
    padding: 8px 15px;
    min-width: 150px;
  }

  .tag-rank {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
  }

  .tag-text {
    font-size: 13px;
  }
}

/* 音乐场景样式 */
.music-scenes {
  margin: 30px 0;
  padding: 20px;
}

.scene-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: #333;
  font-size: 24px;
}

.scene-title i {
  color: #ff6b6b;
}

.scene-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.scene-card {
  height: 180px;
  border-radius: 15px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scene-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  color: white;
  z-index: 1;
  transition: transform 0.3s ease;
}

.scene-content i {
  font-size: 30px;
  margin-bottom: 10px;
}

.scene-content h3 {
  font-size: 20px;
  margin-bottom: 5px;
}

.scene-content p {
  font-size: 14px;
  opacity: 0.8;
}

.scene-hover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 107, 107, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
}

.scene-card:hover .scene-hover {
  opacity: 1;
}

.scene-card:hover .scene-content {
  transform: translateY(-10px);
}

.play-now {
  color: white;
  font-size: 18px;
  font-weight: bold;
  padding: 10px 20px;
  border: 2px solid white;
  border-radius: 25px;
  transition: all 0.3s ease;
}

.scene-card:hover .play-now {
  background: white;
  color: #ff6b6b;
}

/* 智能推荐样式 */
.ai-recommendations {
  margin: 30px 0;
  padding: 20px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.ai-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.ai-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: bold;
}

.ai-title i {
  color: #ff6b6b;
  font-size: 24px;
  animation: pulse 2s infinite;
}

.ai-refresh {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
}

.ai-refresh:hover {
  color: #ff6b6b;
}

.ai-refresh i {
  transition: transform 0.3s ease;
}

.ai-refresh:hover i {
  transform: rotate(180deg);
}

.recommendation-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.recommendation-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.recommendation-card.card-hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.15);
  background: linear-gradient(45deg, #ff9a9e, #fad0c4);
}

.recommendation-card.card-hover .rec-content {
  color: white;
}

.rec-icon {
  width: 50px;
  height: 50px;
  background: rgba(255, 107, 107, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  transition: all 0.3s ease;
}

.rec-icon i {
  font-size: 24px;
  color: #ff6b6b;
  transition: all 0.3s ease;
}

.card-hover .rec-icon {
  background: white;
  transform: rotate(360deg);
}

.rec-content {
  flex: 1;
  transition: all 0.3s ease;
}

.rec-content h4 {
  font-size: 16px;
  margin-bottom: 5px;
}

.rec-content p {
  font-size: 14px;
  color: #666;
}

.rec-action {
  opacity: 0;
  transition: all 0.3s ease;
}

.card-hover .rec-action {
  opacity: 1;
}

.action-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: white;
  color: #ff6b6b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.action-btn:hover {
  transform: scale(1.1);
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.refresh-animation {
  animation: refreshCards 0.5s ease;
}

@keyframes refreshCards {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(-10px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .scene-grid {
    grid-template-columns: 1fr;
  }
  
  .recommendation-cards {
    grid-template-columns: 1fr;
  }
  
  .scene-card {
    height: 150px;
  }
}

.scene-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.scene-video.playing {
  opacity: 1;
}

.scene-controls {
  position: absolute;
  top: 15px;
  right: 15px;
  display: flex;
  gap: 10px;
  z-index: 2;
}

.control-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.control-btn:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.1);
}

.control-btn i {
  color: white;
  font-size: 18px;
}

.mute-btn {
  background: rgba(255, 107, 107, 0.8);
}

.mute-btn:hover {
  background: rgba(255, 107, 107, 1);
}

.close-btn:hover {
  background: #ff6b6b;
}

/* 搜索结果网格布局 */
.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
  padding: 20px;
}

/* 结果卡片样式 */
.result-card {
  position: relative;
  height: 400px;
  perspective: 1500px;
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0;
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 15px;
  overflow: hidden;
  background: white;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-back {
  transform: rotateY(180deg);
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.result-card:hover .card-front {
  transform: rotateY(-180deg);
}

.result-card:hover .card-back {
  transform: rotateY(0);
}

/* 卡片正面样式 */
.result-cover {
  position: relative;
  height: 280px;
  overflow: hidden;
}

.result-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.play-btn {
  width: 60px;
  height: 60px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.8);
  transition: all 0.3s ease;
}

.play-btn i {
  font-size: 24px;
  color: #ff6b6b;
  margin-left: 4px;
}

.result-card:hover .play-overlay {
  opacity: 1;
}

.result-card:hover .play-btn {
  transform: scale(1);
}

.result-info {
  padding: 20px;
}

.result-name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}

.result-artist {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
}

.result-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  padding: 4px 12px;
  background: #f8f9fa;
  border-radius: 12px;
  font-size: 12px;
  color: #666;
  transition: all 0.3s ease;
}

.tag:hover {
  background: #ff6b6b;
  color: white;
  transform: translateY(-2px);
}

/* 卡片背面样式 */
.back-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.music-info {
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.info-item:last-child {
  border-bottom: none;
}

.label {
  color: #666;
  font-size: 14px;
}

.value {
  color: #333;
  font-weight: 500;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.action-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-btn i {
  font-size: 18px;
}

.action-btn.play {
  background: linear-gradient(45deg, #ff6b6b, #ffd93d);
  color: white;
}

.action-btn.add {
  background: #f8f9fa;
  color: #666;
}

.action-btn.download {
  background: #f8f9fa;
  color: #666;
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.lyrics-preview {
  padding: 15px;
  background: #f8f9fa;
  border-radius: 12px;
  max-height: 100px;
  overflow-y: auto;
}

.lyrics-preview p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .results-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
    padding: 10px;
  }

  .result-card {
    height: 350px;
  }

  .result-cover {
    height: 220px;
  }

  .action-btn {
    padding: 10px;
    font-size: 14px;
  }
}
</style> 